<template>
  <div class="my-page">
    <div class="user-profile">
      <div class="avatar-container" @click="handleAvatarClick">
        <img :src="userInfo.avatar || defaultAvatar" class="avatar" />
        <div class="avatar-overlay">
          <span>更换头像</span>
        </div>
      </div>

      <div class="user-info">
        <h2>{{ userInfo.account || "未设置账户名" }}</h2>
        <p class="user-name">{{ userInfo.name || "未设置名称" }}</p>
        <p class="user-type">{{ userType }}</p>
      </div>
    </div>

    <div class="user-intro">
      <h3>个人介绍</h3>
      <p>{{ userInfo.introduction || "暂无介绍" }}</p>
    </div>

    <div class="user-intro">
      <h3>创建时间</h3>
      <p>{{ userInfo.created_time || "暂无创建时间" }}</p>
    </div>

    <div class="action-list">
      <div class="action-item" @click="editProfile">
        <i class="icon-edit"></i>
        <span>编辑个人资料</span>
        <van-icon name="setting" />
      </div>
      <div class="action-item" @click="changePassword">
        <i class="icon-lock"></i>
        <span>修改密码</span>
        <img style="width: 20px; height: 20px" :src="passWordIcon" />
      </div>
    </div>

    <input
      type="file"
      ref="fileInput"
      accept="image/*"
      style="display: none"
      @change="uploadAvatar"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import store from "@/store";
import passWordIcon from "@/assets/password.png";
const userInfo = ref({});
const fileInput = ref(null);
const defaultAvatar = "/path/to/default-avatar.png"; // 设置默认头像路径
import { getToken } from "@/utils/auth";
import host from "@/utils/host";

onMounted(() => {
  // 从store获取用户信息
  getUserInfo();
});

const getUserInfo = () => {
  // 假设store中有获取用户信息的getter
  // console.log(store.getters);
  const { roles, name, avatar, account } = store.getters;
  const created_time = store.getters.created_time.replace("T", " ");
  userInfo.value = { roles, name, created_time, avatar, account };
};

const userType = computed(() => {
  if (store.getters.roles.includes("admin")) {
    return "管理员";
  } else {
    return "普通用户";
  }
});

const handleAvatarClick = () => {
  // 触发文件选择
  fileInput.value.click();
};

const uploadAvatar = async (event) => {
  try {
    const token = getToken();
    const port = process.env.NODE_ENV == "development" ? 9080 : 80;
    const url = `http://${host}:${port}/elearning/user/uploadAvatar`;
    console.log(url);
    const file = event.target.files[0];
    if (!file) return;

    // 创建FormData并发送到服务器
    const formData = new FormData();
    formData.append("file", file); // 参数名为"file"匹配Controller参数
    formData.append("token", token); // token作为请求参数

    // 使用fetch API发送POST请求
    const response = await fetch(url, {
      method: "POST",
      body: formData,
    });

    if (!response.ok) {
      throw new Error("网络响应异常");
    }

    const result = await response.json();
    console.log("上传成功:", result);

    // 处理返回的Result对象
    if (result && result.code === 20000 && result.data) {
      const url = "http://" + host + ":9005" + result.data;
      console.log(url);
      userInfo.value.avatar = url; // 使用result.data获取URL
      // 更新store中的头像
      store.commit("user/SET_AVATAR", url);
    } else {
      console.error("上传失败:", result.message || "未知错误");
    }
  } catch (error) {
    console.error("上传出错:", error);
  } finally {
    // 清空文件输入，允许选择相同文件
    event.target.value = "";
  }
};

const editProfile = () => {
  // 跳转到编辑资料页面或打开编辑弹窗
  console.log("编辑个人资料");
};

const changePassword = () => {
  // 跳转到修改密码页面或打开修改密码弹窗
  console.log("修改密码");
};
</script>

<style scoped>
.my-page {
  padding: 16px;
  max-width: 100%;
  box-sizing: border-box;
}

.user-profile {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16px;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
  padding: 4px 0;
  text-align: center;
}

.user-info {
  flex: 1;
}

.user-info h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.user-name,
.user-type {
  margin: 4px 0;
  font-size: 14px;
  color: #666;
}

.user-intro {
  background: rgb(240, 240, 240);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.user-intro h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.user-intro p {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.action-list {
  border-top: 1px solid #eee;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
  background-color: rgb(240, 240, 240);
  margin-bottom: 10px;
  border-radius: 5px;
}

.action-item i {
  margin-right: 12px;
  font-size: 20px;
  color: #666;
}

.action-item span {
  font-size: 16px;
}

.action-item img,
.action-item .van-icon {
  margin-left: auto;
  margin-right: 12px;
}
</style>
